<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查询 | 外卖配送信息系统</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/css/more.css"/>
    <script src="/js/vue.global-3.2.45.js"></script>
    <script src="/js/axios-1.2.1.js"></script>
</head>
<body>
<div class="Query" id="query-app">
    <form>
        <br/>
        <br/>
        <br/>
        <label>手机号码:
            <input type="text" id="queryPhone" v-model="phone"/>
        </label>
        <br/>
        <br/>
        <label class="Kaptcha">验证码:
            <input type="text" id="kaptcha" v-model="kaptcha"/>
            <img id="kaptcha_img" :src="kaptchaUrl" alt="验证码" title="点击更换" @click="refreshKaptcha"/>
        </label>
        <br/>
        <label>
            <input type="button" @click="query" value="查询"/>
        </label>
        <br/>
        <span id="queryHint" style="color: red">{{ queryHint }}</span>
    </form>

    <br/>
    <div>
        <table border="1" cellspacing="0" cellpadding="5" style="margin: 0 auto">
            <caption id="queriedPhone">{{ tableTitle }}</caption>
            <tr class="text-center">
                <th>收货人</th>
                <th>区域</th>
                <th>组别</th>
                <th>配送员号码</th>
                <th>配送时间</th>
                <th>配送状态</th>
                <th>备注</th>
            </tr>
            <tr class="text-center"
                v-for="tt in tableData">
                <td>{{ tt.userName }}</td>
                <td>{{ tt.blockName }}</td>
                <td>{{ tt.groupName }}</td>
                <td>{{ tt.senderPhone }}</td>
                <td>{{ tt.time }}</td>
                <td>{{ tt.status }}</td>
                <td>{{ tt.detail }}</td>
            </tr>
        </table>
    </div>
</div>
</body>
<script src="/js/query.js"></script>
</html>